<div class="content-wrap">
  <div nz-row [nzGutter]="[16, 16]">
    <div nz-col [nzLg]="24" [nzMd]="24" [nzSm]="24" [nzXl]="7" [nzXs]="24" [nzXXl]="7">
      <nz-card>
        <div class="avatar-wrap">
          <div class="avatar">
            <nz-avatar class="m-b-20" [nzSize]="104" [nzSrc]="'imgs/default_face.png'"></nz-avatar>
            <h4 class="m-b-5" nz-typography>Serati Ma</h4>
            <span nz-typography>海纳百川，有容乃大</span>
          </div>
          <div class="avatar-detail m-t-25">
            <p>
              <i nz-icon nzTheme="outline" nzType="contacts"></i>
              交互专家
            </p>
            <p>
              <i nz-icon nzTheme="outline" nzType="apartment"></i>
              蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED
            </p>
            <p>
              <i nz-icon nzTheme="outline" nzType="home"></i>
              浙江省杭州市
            </p>
          </div>
        </div>
        <nz-divider nzDashed></nz-divider>
        <div class="tags">
          <h5 class="m-b-10">标签</h5>
          @for (item of tagArray; track item) {
            <nz-tag class="m-b-5">{{ item }}</nz-tag>
          }
          @if (!inputVisible) {
            <nz-tag class="editable-tag" nzNoAnimation (click)="showInput()">
              <i nz-icon nzType="plus"></i>
              New Tag
            </nz-tag>
          }
          @if (inputVisible) {
            <input #inputElement type="text" nz-input nzSize="small" style="width: 78px" [(ngModel)]="inputValue" (blur)="handleInputConfirm()" (keydown.enter)="handleInputConfirm()" />
          }
        </div>
        <nz-divider nzDashed></nz-divider>
        <div class="team">
          <h5 class="m-b-10">团队</h5>
          <div nz-row>
            @for (item of 5 | numberLoop; track $index) {
              <div nz-col nzSpan="12" style="padding: 0 18px 0 0">
                <a class="group">
                  <nz-avatar [nzSize]="24" [nzSrc]="'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png'"></nz-avatar>
                  <span class="m-l-10">全组都是吴彦祖</span>
                </a>
              </div>
            }
          </div>
        </div>
      </nz-card>
    </div>
    <div nz-col [nzLg]="24" [nzMd]="24" [nzSm]="24" [nzXl]="17" [nzXs]="24" [nzXXl]="17">
      <nz-card>
        <nz-card-tab>
          <nz-tabset nzSize="large">
            @for (item of tabData; track item) {
              <nz-tab [nzTitle]="item.label" (nzClick)="to(item)"></nz-tab>
            }
          </nz-tabset>
        </nz-card-tab>
        <ng-template appAd></ng-template>
      </nz-card>
    </div>
  </div>
</div>
